<div>
  <div class="card-panel">
    <span>
      <b>{{'商品权限管理'|translate}}:</b>{{'目前您已监控'|translate}}
      <b class="red-text">{{vm.table.count}}/{{user.activeVersionInfo.productCount}}</b>{{'个商品。'|translate}}
    </span>
  </div>
  <div class="container" style="position: relative;">
    <ngx-busy [busy]="busy"></ngx-busy>
    <div class="clearfix">
      <div class="left">
        <en-mark></en-mark>
      </div>
      <div class="right">
        <a mat-raised-button color="primary" (click)="add()" *ngIf="!addView">
          {{'添加' |translate}}<i class="fa fa fa-plus pl5"></i>
        </a>
        <a mat-raised-button color="primary" (click)="add()" *ngIf="addView">
          <i class="fa fa-angle-left pr5" style="vertical-align: baseline;"></i>
          {{'返回' |translate}}
        </a>
        <a mat-raised-button color="primary" (click)="export()" *ngIf="!addView">
          {{'下载'|translate}}
        </a>
      </div>
    </div>
    <div class="table-view" [hidden]="addView">
      <table class="responsive-table bordered highlight" id="shopExport">
        <thead>
          <tr>
            <th *ngFor="let column of columns;let $index = index;" st-sort [st-sort]="column" [st-sort-data]="param" (sortChanged)="sortChange($event)" [innerHTML]="column.title |translate" [ngClass]="column.class" [title]="column.title |translate"> </th>
            <th>{{'监控'|translate}}</th>
          </tr>         
        </thead>
        <tbody>
          <tr *ngFor="let prod of vm.table.products | paginate: { itemsPerPage: 10, currentPage: p, id: 'products_table'};let $index = index;">
            <td *ngIf="prod.date">
              <a href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank">
                <img [src]="prod.picUrl" class="w80">
              </a>
            </td>
            <td *ngIf="prod.date" style="max-width: 240px;">
              <div class="product-p">
                <a href="javascript:;" class="product-title linkHover" goDetail [data]="prod" type="monitorProductDetail" [title]="prod.title"
                  [innerHTML]="prod.title | highlight:param.q"></a>
                <!-- taobao -->
                <a class="grey-text" title="去淘宝" href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank">
                  <i class="fa fa-external-link cp f16"></i>
                </a>
              </div>
              <p class="nick-p">
                <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':prod.shopType=='商城','icon-service-taobao':prod.shopType=='C店','icon-service-tianmaoguoji':prod.shopType=='天猫国际','icon-fest-quanqiugou':prod.shopType=='全球购'}"></span>
                <a href="javascript:;" class="mr4 normal">{{prod.shopName}}</a>
                <!-- taoabao -->
                <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{prod.uid}}" target="_blank">
                  <i class="fa fa-external-link cp f16"></i>
                </a>
              </p>
            </td>
            <!-- 品牌 -->
            <td *ngIf="prod.date">
              <a class="normal" href="javascript:;" [title]="prod.brandName" [innerHTML]="prod.brandName || '-'"></a>
            </td>
            <td *ngIf="prod.date">{{prod.catName | categoryName}}</td>
            <!-- 日销 -->
            <td *ngIf="prod.date">
              <span class="tm-yen">¥</span>{{prod.sellMoney | bigNum}}</td>
            <td *ngIf="prod.date">{{prod.sellAmount||0 | number:'1.0-0' }}</td>
            <td *ngIf="prod.date">
              <span class="tm-yen">¥</span>{{prod.price | number:'1.0-2'}}</td>
            <!-- 月销 -->
            <td *ngIf="prod.date">
              <span class="tm-yen">¥</span>{{prod.monthSellMoney | bigNum}}</td>
            <td *ngIf="prod.date">{{prod.monthSellAmount||0 | number:'1.0-0' }}</td>
            <td *ngIf="prod.date">
              <span class="tm-yen">¥</span>{{prod.monthPrice | number: '1.0-1'}}</td>
            <td *ngIf="prod.date">
              <monitor-slide-toggel [checked]="true" type="product" [data]="prod"></monitor-slide-toggel>
            </td>
            <!-- 下架宝贝 -->
            <td colspan="10" *ngIf="!prod.date">
              <a class="cp linkHover" href="https://item.taobao.com/item.htm?id={{prod.target}}" target="_blank">{{'该宝贝已下架'|translate}}</a>
            </td>
            <td *ngIf="!prod.date">
              <monitor-slide-toggel [checked]="true" type="product" [data]="prod"></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.products.length ==0">
            <td colspan="10" class="center-align">
              <span>{{'暂无商品监控'|translate}}&nbsp;
                <a md-raised-button color="primary" (click)="add()">{{'立即添加'|translate}}</a>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      <pagination-controls class="center-align pt20" id="products_table" (pageChange)="p = $event" maxSize="9" directionLinks="true"
        autoHide="true">
      </pagination-controls>
    </div>
    <div class="add-view" *ngIf="addView">
      <monitor-add type="product"></monitor-add>
    </div>
  </div>
</div>